<template>
  <div id="app">
    <audio controls ref="audio" class="aud" v-show="false">
      <source src="./assets/4950.mp3" />
    </audio>
    <router-view />
  </div>
</template>

<script setup>
import useSettingsStore from '@/store/modules/settings'
import { ElNotification } from 'element-plus'
import { handleThemeStyle } from '@/utils/theme'
import { reactive, getCurrentInstance, watchEffect } from 'vue'
import webSocket from './utils/webSocket/index'
import useUserStore from '@/store/modules/user'
import { ElMessage, ElMessageBox } from 'element-plus'
const audio = ref(null)
const useUser = useUserStore()
const { proxy } = getCurrentInstance()

const state = reactive({
  url: 'ws://192.168.0.74:9991/webSocketToUser',
  returnData: []
})

const play = () => {
  audio.value.play() //play()为播放函数
}

onMounted(() => {
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(useSettingsStore().theme)
  })
  const socket = ref()
  // 监听是否已登录 登录后 启用websocket
  watch(
    () => useUser.userId,
    val => {
      if (val) {
        // socket.value = webSocket.initWebSocket()
        // ElMessageBox.alert('本项目需要权限播放声音，是否同意？', '系统提示', {
        //   // if you want to disable its autofocus
        //   // autofocus: false,
        //   confirmButtonText: 'OK',
        //   callback: action => {
        //     audio.value.play()
        //     ElMessage({
        //       type: 'success',
        //       message: `获取成功`
        //     })
        //   }
        // })
      } else {
        socket.value.close()
        console.log('关闭连接')
      }
    },
    {
      deep: true
    }
  )

  watch(
    () => useUser.socket,
    val => {
      console.log('执行')
      play()
    }
  )
})

let lastDevicePixelRatio = window.devicePixelRatio
window.addEventListener('resize', function () {
  const newDevicePixelRatio = window.devicePixelRatio
  if (lastDevicePixelRatio !== newDevicePixelRatio) {
    location.reload()
  }
})
</script>

<style lang="scss">
@import 'https://at.alicdn.com/t/c/font_3742145_9yuqtyvbdpv.css';
.el-link {
  margin-right: 8px;
}
/* app.css */
.icon-custom {
  /* 定义一个公共的类名 */
  border-radius: 50%;
  background-size: 65%;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-custom.lindaidai-task {
  /* 加上背景图 */
  background-image: url('https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/rules.png');
}
/* .pagination {
  width: 80%;
  position: fixed;
  bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
} */
#app ::v-deep .el-form-item {
  width: 228px;
}
.title {
  font-weight: 700;
  font-size: 16px;
  margin: 5px;
}
.Btn {
  float: right;
  margin-top: 10px;
  min-width: 160px;
}
// .app-container ::v-deep .el-form-item__content {
//   width: 228px;
// }

/* 备注样式 */
.remarkLabel {
  display: inline-block;
  text-align: right;
  width: 80px;
  box-sizing: border-box;
  padding: 0 12px 0 0;
  font-weight: 700;
  flex: 0 0 auto;
}
.app-container {
  width: 100%;
}

.groupClass {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #fff;
  background-color: #ffffff;
}

.groupClass_av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #fff;
  background-color: #409eff;
}
// .app-container ::v-deep .el-input__inner {
//   width: 120px !important;
// }
// .app-container ::v-deep .el-input {
//   width: 120px !important;
// }
</style>
